<template>
  <el-dialog
    title="历史数据"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="80%"
    append-to-body
    class="borderb_dia"
  >
    <div class="table-big">
      <el-table
        :data="tableDataList"
        ref="historicalSettlementList"
        :max-height="tableHeight"
        class="tableHightClass"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <!--状态-->
            <div v-if="item.key == 'status'">
              <el-switch v-model="scope.row[item.key]" @change="handleStatusChange(scope.row)"></el-switch>
            </div>
            <div v-else-if="item.key == 'status_name'" class="status">
              <span :class="scope.row.status == 1 ? `color-green` : `color-red`">{{ scope.row[item.key] }}</span>
            </div>
            <div v-else>{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="created_at"
          label="操作"
          width="280"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="flexcenter btnflex">
              <div class="commhover mr_10 c_primary" @click="downFile(scope.row)">下载</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 10"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.num"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>

<script>
import { reqCoordinateList } from '@/api/coordinateMgt'
import { reqPayCheckIndex, reqPayCheckIndexExport } from '@/api/trafficMasterMgt'

export default {
  data() {
    return {
      total: 8, // 表格的总条数
      queryParams: {
        page: 1,
        num: 10,
        name: this.$attrs.queryParams.name, //名字
        id: this.$attrs.queryParams.id, //名字,
        status: this.$attrs.queryParams.status, //状态
        start: this.$attrs.queryParams.start, //开始时间
        end: this.$attrs.queryParams.end //结束时间
      },
      tableHeight: null,//表格高度
      tableDataList: [],//数据
      tableColumns: [
        { key: 'custom_id', label: `ID`, visible: true, fixed: true },
        { key: 'user_login', label: `会员名`, visible: true, fixed: false },
        { key: 'create_time', label: `结算时间`, visible: true, minWidth: 150, fixed: false },
        { key: 'type_name', label: `结算类型`, visible: true, minWidth: 150, fixed: false },
        { key: 'status_name', label: `结算进度`, visible: true, minWidth: 150 },
        { key: 'score', label: `原始收入（广告币）`, visible: true, minWidth: 150 },
        { key: 'use_coin', label: `原始收入（元）`, visible: true, minWidth: 150 },
        { key: 'old_coin', label: `结算收入（元）`, visible: true, minWidth: 150 }

      ],
      exportColumns: [
        { key: 'custom_id', label: `ID`, visible: true, fixed: true },
        { key: 'custom.user_login', label: `会员名`, visible: true, fixed: false },
        { key: 'create_time', label: `结算时间`, visible: true, minWidth: 150, fixed: false },
        { key: 'type_name', label: `结算类型`, visible: true, minWidth: 150, fixed: false },
        { key: 'status_name', label: `结算进度`, visible: true, minWidth: 150 },
        { key: 'score', label: `原始收入（广告币）`, visible: true, minWidth: 150 },
        { key: 'use_coin', label: `原始收入（元）`, visible: true, minWidth: 150 },
        { key: 'old_coin', label: `结算收入（元）`, visible: true, minWidth: 150 }
      ]
    }
  },
  props: {
    rowitem: {
      default: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //重置表单
    getList() {
      this.tableDataList = []
      this.loading = true
      if (this.timeRange && this.timeRange.length > 0) {
        this.queryParams.start = this.timeRange[0]
        this.queryParams.end = this.timeRange[1]
      } else {
        this.queryParams.start = null
        this.queryParams.end = null
      }
      for (let key in this.queryParams) {
        if (!this.queryParams[key]) {
          delete this.queryParams[key]
        }
      }
      reqPayCheckIndex(this.queryParams).then((res) => {
        this.tableDataList = res.data.list
        this.tableDataList.forEach(item => {
          item.user_login = item.custom.user_login
        })
        this.total = res.data.count;
        this.loading = false
      })
    },
    downFile(row) {
      const a = document.createElement('a')
      a.href = row.check_url
      a.download = '历史流量主.xls' // 下载后文件名
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click() // 点击下载
      document.body.removeChild(a) // 下载完成移除元素
    },
    /** 导出按钮操作 */
    handleExport() {
      let form = JSON.parse(JSON.stringify(this.queryParams))
      let head = []
      let keys = []
      for (let key in form) {
        if (!form[key]) {
          delete form[key]
        }
      }
      this.exportColumns.forEach(item => {
        head.push(item.label)
        keys.push(item.key)
      })
      form.head = head
      form.keys = keys
      delete form.page
      delete form.num
      reqPayCheckIndexExport(form).then((res) => {
        if (res.code == 1) {
          const a = document.createElement('a')
          document.body.appendChild(a)
          a.download = '流量主管理导出表.xls'
          a.href = res.data
          a.click()
          document.body.removeChild(a)
        }

      })

    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
